<template>
  <view class="detail-wrap">
    <back :back-title="backTitle"></back>
		<view class="report" @click="handlePass" v-if="info.leaveState===2 && !info.salesLeaveState">
			<image class="report-image" src="/static/images/leave/report.png"></image>
		</view>
		<view class="info-wrap">
			<view class="info-top">
				<image class="" src="/static/images/common/first.png"></image>
				<view class="audit">申请人</view>
				<view class="name">{{info.userName}}</view>
				<view class="status">{{info.leaveState === 1 ? '未审核': info.leaveState === 2?'审核通过': '驳回'}}</view>
			</view>
			<view class="info-bottom">
				<view class="item">申请日期 <text>{{info.leaveCreateTime}}</text></view>
				<view class="item">请假类型 <text>{{info.leaveType ? '事假': '病假'}}</text></view>
				<view class="item">请假时间 <text>{{info.leaveStartTime}}</text></view>
				<view class="item">结束时间 <text>{{info.leaveEndTime}}</text></view>
				<view class="reason">请假事由 <view class="text">{{info.leaveContent}}</view></view>
				<view class="image-box">
					<previewImg v-if="info.leavePhoto.length" :list="info.leavePhoto" class="preview-image"></previewImg>
				</view>
			</view>
			<image v-if="info.salesLeaveState" class="pass-icon" src="/static/images/leave/pass.png"></image>
		</view>
    <uni-popup :show="middle" type="middle" mode="insert" @hidePopup="hidePopup">
			<view class="pop-pass">
        <view class="header-pass">
          <image src="/static/images/leave/pass-header.png"></image>
        </view>
        <image class="pass-time" src="/static/images/leave/pass-time.png"></image>
        <view class="time"><text>{{parseTimeFuc(+new Date())}}</text></view>
        <view class="button-wrap">
          <common-button :btn-title="btnTitle" @submit="handleSubmit"></common-button>
        </view>
      </view>
		</uni-popup>
  </view>
</template>

<script>
  import previewImg from '../../../../components/preview/index'
  import {uniPopup} from "../../../../components/uni-popup/uni-popup.vue"
  import {parseTime} from '../../../../utils/index'
	import CommonButton from '../../../../components/button/index'
	import {saleRequest} from '../../../../api/leave'
export default {
  name: 'detail',
	components: {
    previewImg,
    uniPopup,
    CommonButton
	},
  data() {
    return {
      backTitle: '请假详情',
      middle: false,
			parseTimeFuc: parseTime,
			info: {
				userName: '',
				leaveCreateTime: 0,
				leaveType: 1,
				leaveStartTime: 0,
				leaveEndTime: 0,
				leaveDuration: 0,
				leaveContent: '',
				leavePhoto: [],
				leaveState: 1,
				salesLeaveState: null,
				leaveId: '',
				leaveActualTime: ''
			},
			btnTitle: '确认'
    }
	},
	onLoad(options) {
		this.initDate(options.params)
	},
  methods: {
    handlePass() {
      this.middle = true
    },
		hidePopup() {
			this.middle = false
		},
		initDate(params) {
			params = JSON.parse(params)
			const info = this.info
			info.userName = params.userName
			info.leaveCreateTime = parseTime(params.leaveCreateTime).substring(0,10)
			info.leaveType = params.leaveType
			info.leaveStartTime = parseTime(params.leaveStartTime)
			info.leaveEndTime = parseTime(params.leaveEndTime)
			info.leaveDuration = params.leaveDuration
			info.leaveContent = params.leaveContent
			info.leaveState = params.leaveState
			info.salesLeaveState = params.salesLeaveState
			info.leavePhoto.push(...unescape(params.leavePhoto).split(','))
			info.leaveId = params.leaveId
			info.leaveActualTime = params.leaveActualTime
		},
		async handleSubmit() {
			const {salesLeaveState,leaveId,leaveActualTime} = this.info
			const userInfo = uni.getStorageSync('USER_INFO')
			const schoolId = JSON.parse(userInfo).schoolId
			await saleRequest({ schoolId, salesLeaveState : 1,leaveId,leaveActualTime })
			this.info.salesLeaveState = 1
			this.middle = false
		}
  }
}

</script>
<style lang='scss' scoped>
.detail-wrap{
  width: 100%;
  min-height: 100vh;
	position: relative;
	.report{
		position: absolute;
		top: 56upx;
		right: 20upx;
		image{
			height: 60upx;
			width: 126upx;
		}
	}
	.info-wrap{
		width: 100%;
		padding: 20upx;
		box-sizing: border-box;
    position: relative;
		.info-top{
			height: 132upx;
			background: #F0F0F0;
			border-bottom: 4upx dashed #BCD5FC;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding: 0 32upx;
			box-sizing: border-box;
			border-radius:10upx 10upx 0 0;
			position: relative;
			image{
				width:83upx;
				height:83upx;
				margin-right: 26upx;
			}
			.audit{
				font-size:35upx;
				font-weight:bold;
				color:rgba(44,109,210,1);
				margin-right: 80upx;
			}
			.name {
				font-size:35upx;
				color:rgba(44,109,210,1);
				margin-right: 80upx;
			}
			.status{
				font-size:30upx;
				font-weight:500;
				color:rgba(94,215,163,1);
				position: absolute;
				top: 38upx;
				right: 20upx;
			}
			&::before {
				content: '';
				position: absolute;
				width:12upx;
				height:24upx;
				background:rgba(255,255,255,1);
				border-radius:0 24upx 24upx 0;
				bottom: -12upx;
				left:0;
			}
			&::after {
				content: '';
				position: absolute;
				width:12upx;
				height:24upx;
				background:rgba(255,255,255,1);
				border-radius:24upx 0 0 24upx;
				bottom: -12upx;
				right:0;
			}
			
		}
		.info-bottom{
			width: 100%;
			padding: 32upx 52upx 52upx 110upx;
			box-sizing: border-box;
			background-color: #f0f0f0;
			.item{
				font-size: 30upx;
				color: #333;
				font-weight: bold;
				line-height: 70upx;
				display: flex;
				text{
					font-weight: normal;
					margin-left: 30upx;
				}
			}
			.reason{
				margin-bottom: 20upx;
				padding-top: 8upx;
				box-sizing: border-box;
				line-height: 56upx;
				font-weight: bold;
				.text{
					font-size:30upx;
					line-height: 50upx;
					font-weight: normal;
				}
			}
			.image-box{
				width: 100%;
			}
		}
		.pass-icon{
			position: absolute;
			top: 112upx;
			right: 30upx;
			width:173upx;
			height:173upx;
		}
	}
}
.pop-pass{
	width:580upx;
	padding-bottom: 30upx;
	box-sizing: border-box;
	background:rgba(255,255,255,1);
	border-radius:21upx;
  animation: tr .3s;
  text-align: center;
  .header-pass{
    width: 100%;
    height:133upx;
    border-radius:21px 21px 0px 0px;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .pass-time{
    margin-top: 42upx;
    margin-bottom: 74upx;
    height: 104upx;
    width: 276upx;
  }
  .time{
    width:480upx;
    margin: 0 auto 90upx;
    text{
      font-size:75upx;
      font-weight:bold;
      color:rgba(102,102,102,1);
      line-height:83upx;
    }
    
  }
  .button-wrap{
    width: 540upx;
    margin: 0 auto;
  }
}
@keyframes tr {
  0%{
    transform: scale(1)
  }
  50%{
    transform: scale(.8)
  }
  100%{
    transform: scale(1)
  }
}
</style>